<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html class="no-js" lang="">
<head>
    <jsp:include page="../layout/head.jsp">
        <jsp:param name="title" value="修改头像"/>
        <jsp:param name="cssName" value="change-uc-img"/>
    </jsp:include>
</head>
<body>
<jsp:include page="../layout/nav.jsp"/>

<div class="container">


    <jsp:include page="userleft.jsp"/>

    <div class="main">
        <div class="page-wrapper">
            <h1 class="title">修改头像</h1>

            <div class="pass-portrait">
                <ul class="pass-portrait-nav">
                    <li class="active" id="custom-nav">上传头像</li>
                    <li class="" id="hot-recom-nav">热门推荐头像</li>
                </ul>
                <form action="${pageContext.request.contextPath}/user/updImg" method="post" enctype="multipart/form-data">


                    <div class="pass-portrait-content">
                        <div class="pass-portrait-left">

                            <div class="pass-portrait-tab-content custom">
                                <p class="pass-portrait-commonp">选择本地照片, 上传编辑自己的头像</p>
                                <label for="upload-portrait" class="btn btn-default">选择图片</label>
                                <input type="file" id="upload-portrait" name="fileName">
                                <span class="support-type">支持jpg、jpeg、gif、png、bmp格式的图片</span>
                            </div>
                            <div class="pass-portrait-tab-content hot-recom hide">

                                <input type="hidden" name="pid" id="pid">
                                <ul class="pass-portrait-hot-recommend">

                                    <c:forEach items="${recomImgs}" var="recom">
                                        <li id="${recom.id}" class="${user.photo.id == recom.id ? 'active':''}"><img src="${pageContext.request.contextPath}${recom.img}" alt=""></li>
                                    </c:forEach>


                                </ul>


                            </div>

                        </div>
                        <div class="pass-portrait-right">
                            <h4>头像预览</h4>
                            <div class="pass-portrait-big">
                                <img id="js-big-portrait" src="${pageContext.request.contextPath}${user.photo.img}" alt="">
                                <p class="img-size">大头像 100*100</p>
                            </div>
                            <div class="pass-portrait-small">
                                <img id="js-small-portrait" src="${pageContext.request.contextPath}${user.photo.img}" alt="">
                                <p class="img-size">小头像 55*55</p>
                            </div>

                            <button class="btn btn-default" type="submit">保存修改</button>
                        </div>

                    </div>
                </form>


            </div>


        </div>

    </div>

</div>
<jsp:include page="../layout/footer.jsp"/>
</body>
</html>
